<template>
  <div class="logistics">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="logisticsForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="po" label="PO号">
            <el-input v-model="formData.po" clearable placeholder="请输入PO号" />
          </el-form-item>
          <el-form-item prop="orderCode" label="订单号">
            <el-input v-model="formData.orderCode" clearable placeholder="请输入订单号" />
          </el-form-item>
          <el-form-item prop="contractNo" label="承运合同号">
            <el-input v-model="formData.contractNo" clearable placeholder="请输入承运合同号" />
          </el-form-item>
          <el-form-item prop="shipCode" label="调度单号">
            <el-input v-model="formData.shipCode" clearable placeholder="请输入调度单号" />
          </el-form-item>
          <el-form-item prop="saleName" label="送达方">
            <el-input v-model="formData.saleName" clearable placeholder="请输入送达方" />
          </el-form-item>
          <el-form-item prop="contactName" label="收货人">
            <el-input v-model="formData.contactName" clearable placeholder="请输入收货人" />
          </el-form-item>
          <el-form-item align="left">
            <Button @click="resetClick('logisticsForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('logisticsForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="table-list-box">
        <el-table
          ref="multipleTable"
          v-loading="isLoading"
          border
          height="400"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="tableData"
        >
          <el-table-column prop="po" label="PO号" width="180" />
          <el-table-column prop="orderCode" label="订单号" width="120" />
          <el-table-column prop="contractNo" label="承运合同号" width="160" />
          <el-table-column prop="shipCode" label="调度单号" width="120" />
          <el-table-column prop="saleName" label="送达方" width="120" />
          <el-table-column prop="address" label="送达方地址" width="220" :show-overflow-tooltip="true" />
          <el-table-column prop="contactName" label="收货人" />
          <el-table-column prop="telephone" label="收货人联系电话" width="120" />
          <el-table-column prop="liense" label="车牌号" width="120" :show-overflow-tooltip="true" />
          <el-table-column prop="driverName" label="司机" />
          <el-table-column prop="driverMobile" label="司机电话" width="120" />
          <el-table-column prop="shipmentDate" label="配车时间" width="100" />
          <el-table-column prop="departureTime" label="启运时间" width="100" />
          <el-table-column prop="position" label="当前车辆位置" width="100" />
          <el-table-column prop="status" label="签收状态" width="120" />
          <el-table-column prop="eneDate" label="签收时间" width="120" />
        </el-table>
      </div>
      <CustomPagination
        :total="pageInfo.total"
        :page="formData.page"
        :limit="formData.pageSize"
        @pagination="paginationChange"
      ></CustomPagination>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import CustomPagination from '@/components/CustomPagination'
import { getTmsDataInfo } from '@/api/mscInfo'
export default {
  name: 'InfoDataLogistics',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    CustomPagination
  },
  data() {
    return {
      isLoading: false,
      formData: {
        po: '', // PO号
        orderCode: '', // 订单号
        contractNo: '', // 承运合同号
        shipCode: '', // 调度单号
        saleName: '', // 送达方
        contactName: '', // 收货人
        page: 1,
        pageSize: 10
      },
      pageInfo: {
        total: 0
      },
      formRules: {},
      tableData: []
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.findTmsDataInfo()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 重置搜索
     */
    resetClick(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * 查询物流信息
     */
    findTmsDataInfo() {
      const formData = { ...this.formData }
      const obj = {}
      const vailData = {}
      Object.keys(formData).forEach(key => {
        if (formData[key]) {
          if (key !== 'page' && key !== 'pageSize') vailData[key] = formData[key]
          obj[key] = formData[key]
        }
      })
      if (Object.keys(vailData).length === 0) {
        this.$message({
          message: '请输入至少一个查询条件',
          type: 'warning'
        })
        return
      }
      this.isLoading = true
      getTmsDataInfo(obj).then(res => {
        if (res.success === 1) {
          this.isLoading = false
          const { records, total } = res.data
          this.pageInfo.total = total
          if (Array.isArray(records) && records.length) {
            this.tableData = records
          } else {
            this.tableData = []
            this.pageInfo.total = 0
          }
        }
      }, () => {
        this.isLoading = false
      })
    },
    /**
     * 选择每页多少条
     */
    handleSizeChange(pageSize) {
      this.$set(this.formData, 'page', 1)
      this.$set(this.formData, 'pageSize', pageSize)
      this.$nextTick(() => {
        this.findTmsDataInfo(this.formData)
      })
    },
    /**
     * 分页
     */
    handleCurrentChange(currrentPage) {
      this.$set(this.formData, 'page', currrentPage)
      this.$nextTick(() => {
        this.findTmsDataInfo(this.formData)
      })
    },
    // 分页返回相应请求参数
    paginationChange(paramsObj) {
      this.$set(this.formData, 'pageSize', paramsObj.rows)
      this.$set(this.formData, 'page', paramsObj.page)
      this.$nextTick(() => {
        this.findTmsDataInfo()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
